<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div id="div1">
        请选择种类:
        <el-select v-model="value" placeholder="种类类别" @change="created11">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          @click="delAllSelection"
          >新增一行</el-button
        >
      </div>
      <div v-if="istable">
        <el-table
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-for="item in this.tableColumnList[this.tableinfo]"
            :label="item.propName"
            :prop="item.prop"
            :key="item.prop"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="修改编辑" :visible.sync="editVisible" width="70%">
      <el-form ref="form" :model="form" label-width="90px" :inline="true">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="item in this.tableColumnList[this.tableinfo]"
            :key="item.prop"
          >
            <el-form-item :label="item.propName" align="center">
              <el-input v-model="form[item.prop]"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增框弹出-->
    <el-dialog title="新增编辑" :visible.sync="addVisible" width="70%">
      <el-form ref="form" :model="form" label-width="90px" :inline="true">
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="item in this.tableColumnList[this.tableinfo]"
            :key="item.prop"
          >
            <el-form-item :label="item.propName" align="center">
              <el-input v-model="form[item.prop]"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "jiben",
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      options: [
        {
          value: "gold_goodscolour",
          label: "成色设置"
        },
        {
          value: "gold_goodsattribute",
          label: "属性设置"
        },
        {
          value: "gold_stylesort",
          label: "款式分类设置"
        },
        {
          value: "gold_goodstype",
          label: "商品类型设置"
        },
        {
          value: "gold_goodscontent",
          label: "含金量设置"
        },
        {
          value: "gold_stock",
          label: "回收旧料名称设置"
        },
        {
          value: "gold_pricetype",
          label: "价格类型设置"
        },
        {
          value: "gold_weightunit",
          label: "重量单位设置"
        },
        {
          value: "gold_goodsclassify",
          label: "商品分类设置"
        },
        {
          value: "gold_goodscatena",
          label: "商品系列设置"
        },
        {
          value: "gold_commission",
          label: "提成分类设置"
        },
        {
          value: "gold_Currency",
          label: "币别设置"
        }
      ],
      value: "",
      addVisible: false,
      tableData: [],
      tableinfo: "gold_goodscolour",
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      istable: true,
      tableColumnList: {
        gold_goodscolour: [
          { prop: "id", propName: "ID" },
          { prop: "code", propName: "成色编码" },
          { prop: "name", propName: "名称18K金" },
          { prop: "weightunit", propName: "重量单位g" },
          { prop: "proportion", propName: "成分比例" },
          { prop: "classes", propName: "成色类别" },
          { prop: "purename", propName: "干足料名称" }
        ],
        gold_goodsattribute: [
          { prop: "id", propName: "属性id" },
          { prop: "code", propName: "属性编码" },
          { prop: "name", propName: "属性名称" }
        ],
        gold_stylesort: [
          { prop: "id", propName: "款式id" },
          { prop: "code", propName: "款式分类编码" },
          { prop: "name", propName: "款式分类名称" }
        ],
        gold_goodstype: [
          { prop: "id", propName: "类型id" },
          { prop: "code", propName: "类型编码" },
          { prop: "name", propName: "类型名称" },
          { prop: "template", propName: "分配录入模板" }
        ],
        gold_goodscontent: [
          { prop: "id", propName: "含金量id" },
          { prop: "content", propName: "含金量" },
          { prop: "name", propName: "含金量名称" }
        ],
        gold_stock: [
          { prop: "id", propName: "旧料id" },
          { prop: "code", propName: "旧料编码" },
          { prop: "name", propName: "旧料名称" },
          { prop: "price", propName: "料价" }
        ],
        gold_pricetype: [
          { prop: "id", propName: "价格id" },
          { prop: "code", propName: "价格编码" },
          { prop: "type", propName: "价格类型" },
          { prop: "sign", propName: "打折标志" }
        ],
        gold_weightunit: [
          { prop: "id", propName: "重量单位id" },
          { prop: "code", propName: "重量编码" },
          { prop: "name", propName: "重量名称" }
        ],
        gold_goodsclassify: [
          { prop: "id", propName: "id" },
          { prop: "lvone", propName: "一级分类" },
          { prop: "lvtwo", propName: "二级分类" },
          { prop: "name", propName: "分类名称" },
          { prop: "modulus", propName: "分类系数" }
        ],
        gold_goodscatena: [
          { prop: "id", propName: "id" },
          { prop: "name", propName: "系数名称" },
          { prop: "desc", propName: "系数说明" }
        ],
        gold_commission: [
          { prop: "id", propName: "id" },
          { prop: "name", propName: "提成分类名称" },
          { prop: "desc", propName: "提成分类说明" }
        ],
        gold_Currency: [
          { prop: "id", propName: "id" },
          { prop: "code", propName: "币别编码" },
          { prop: "name", propName: "币别名称" },
          { prop: "parities", propName: "汇率" },
          { prop: "localcurrency", propName: "本位币" }
        ]
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData: function() {
      console.log(this.tableinfo);
      this.$axios
        .get(this.$api.jiben.findall, {
          params: {
            table: this.tableinfo,
            pageNum: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          console.log(response);
          this.$set(this.$data, "tableData", result);
          this.pageTotal = response.data.data.total || 50;
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    created11() {
      this.istable = false;
      var e = arguments[0];
      this.$nextTick(() => {
        this.istable = true;
        this.tableinfo = e;
        console.log(this);
        this.getData();
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      var obj = {};
      obj[this.tableinfo] = [row.id];
      console.log(obj);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$axios
            .post(this.$api.jiben.delete, obj, {
              headers: {
                "Content-Type": "application/json"
              }
            })
            .then(response => {
              this.$message.success(response.data.msg);
              this.getData();
            })
            .catch(err => {
              console.log(err);
              this.$alert("请求出错");
            });
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      this.addVisible = true;
    },
    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.idx = index;
      this.form = { ...row };
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      var obj = {};
      obj[this.tableinfo] = this.form;
      console.log(obj);
      this.$axios
        .post(this.$api.jiben.update, obj, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          this.getData();
        });
      this.form = {};
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    addEdit() {
      this.addVisible = false;
      var obj = {};
      obj[this.tableinfo] = this.form;
      console.log(obj);
      this.$axios
        .post(this.$api.jiben.insert, obj, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          console.log(res.data.data);
          this.getData();
        });
      this.form = {};
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
#div1 {
  margin-bottom: 20px;
}
</style>
